---
title: Element del menú
image: /imatges/manual-d'usuari/kanban-views/kanban.png
---

<Frame>
  <img src="/images/user-guide/kanban-views/kanban.png" alt="Header" />
</Frame>

Un element versàtil de menú dissenyat per ser utilitzat en un menú o llista de navegació.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { IconAlertCircle } from "@tabler/icons-react";
import { MenuItem } from "twenty-ui/display";

export const MyComponent = () => {
  const handleMenuItemClick = (event) => {
    console.log("Menu item clicked!", event);
  };

  const handleButtonClick = (event) => {
    console.log("Icon button clicked!", event);
  };

  return (
    <MenuItem
      LeftIcon={IconBell}
      accent="default"
      text="Menu item text"
      iconButtons={[{ Icon: IconAlertCircle, onClick: handleButtonClick }]}
      isTooltipOpen={true}
      testId="menu-item-1"
      onClick={handleMenuItemClick}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Props              | Tipus          | Descripció                                                                                                                                  |
| ------------------ | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| LeftIcon           | ComponentIcona | Una icona opcional a l'esquerra que es mostra abans del text a l'element del menú                                                           |
| accent             | cadena         | Especifica el color d'accent de l'element del menú. Options include: `default`, `danger`, and `placeholder` |
| text               | cadena         | El contingut de text de l'element del menú                                                                                                  |
| botons d'icona     | conjunt        | Un conjunt d'objectes que representen botons d'icona addicionals associats amb l'element del menú                                           |
| isTooltipOpen      | boolean        | Controla la visibilitat del visor associat amb l'element del menú                                                                           |
| identificadorProva | cadena         | L'atribut data-testid per a proves                                                                                                          |
| onClick            | funció         | Funció de retorn de crida activada quan es clica l'element del menú                                                                         |
| nomDeClasse        | cadena         | Nom opcional per a un estil addicional                                                                                                      |

</Tab>
</Tabs>

## Variants

Les diferents variants del component de l'element del menú inclouen les següents:

### Comanda

Un element de menú en estil de comanda dins d'un menú per indicar dreceres de teclat.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemCommand } from "twenty-ui/display";

export const MyComponent = () => {
  const handleCommandClick = () => {
    console.log("Command clicked!");
  };

  return (
    <MenuItemCommand
      LeftIcon={IconBell}
      text="First Option"
      firstHotKey="⌘"
      secondHotKey="1"
      isSelected={true}
      onClick={handleCommandClick}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Props        | Tipus          | Descripció                                                                        |
| ------------ | -------------- | --------------------------------------------------------------------------------- |
| LeftIcon     | ComponentIcona | Una icona opcional a l'esquerra que es mostra abans del text a l'element del menú |
| text         | cadena         | El contingut de text de l'element del menú                                        |
| firstHotKey  | cadena         | La primera drecera de teclat associada a la comanda                               |
| secondHotKey | cadena         | La segona drecera de teclat associada a la comanda                                |
| isSelected   | boolean        | Indica si l'element del menú està seleccionat o destacat                          |
| onClick      | funció         | Funció de retorn de crida activada quan es clica l'element del menú               |
| nomDeClasse  | cadena         | Nom opcional per a un estil addicional                                            |

</Tab>
</Tabs>

### Arrossegable

Un component arrossegable de l'element del menú dissenyat per utilitzar-se en un menú o llista on els elements es poden arrossegar i es poden realitzar accions addicionals a través dels botons d'icona.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { IconAlertCircle } from "@tabler/icons-react";
import { MenuItemDraggable } from "twenty-ui/display";

export const MyComponent = () => {
  const handleMenuItemClick = (event) => {
    console.log("Menu item clicked!", event);
  };

  return (
    <MenuItemDraggable
      LeftIcon={IconBell}
      accent="default"
      iconButtons={[{ Icon: IconAlertCircle, onClick: handleButtonClick }]}
      isTooltipOpen={false}
      onClick={handleMenuItemClick}
      text="Menu item draggable"
      isDragDisabled={false}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Props          | Tipus          | Descripció                                                                                                                  |
| -------------- | -------------- | --------------------------------------------------------------------------------------------------------------------------- |
| LeftIcon       | ComponentIcona | Una icona opcional a l'esquerra que es mostra abans del text a l'element del menú                                           |
| accent         | cadena         | Especifica el color d'accent de l'element del menú. It can either be `default`, `placeholder`, and `danger` |
| botons d'icona | conjunt        | Un conjunt d'objectes que representen botons d'icona addicionals associats amb l'element del menú                           |
| isTooltipOpen  | boolean        | Controla la visibilitat del visor associat amb l'element del menú                                                           |
| onClick        | funció         | Funció de devolució de trucada per activar quan es clica l'enllaç                                                           |
| text           | cadena         | El contingut de text de l'element del menú                                                                                  |
| isDragDisabled | boolean        | Indica si l'arrossegament està deshabilitat                                                                                 |
| className      | cadena         | Nom opcional per a un estil addicional                                                                                      |

</Tab>
</Tabs>

### Multiselecció

Proporciona un mètode per implementar una funcionalitat de multiselecció amb una casella de selecció associada.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemMultiSelect } from "twenty-ui/display";

export const MyComponent = () => {

  return (
    <MenuItemMultiSelect
      LeftIcon={IconBell}
      text="First Option"
      selected={false}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Propietats      | Tipus          | Descripció                                                                        |
| --------------- | -------------- | --------------------------------------------------------------------------------- |
| LeftIcon        | ComponentIcona | Una icona opcional a l'esquerra que es mostra abans del text a l'element del menú |
| text            | cadena         | El contingut de text de l'element del menú                                        |
| seleccionat     | boolean        | Indica si l'element del menú està seleccionat (marcat)         |
| enSeleccióCanvi | funció         | Funció de retorn de crida activada quan canvia l'estat de la casella de selecció  |
| className       | cadena         | Nom opcional per a un estil addicional                                            |

</Tab>
</Tabs>

### Selecció d'Avatar

Un element del menú de multiselecció amb un avatar, una casella de selecció per a la selecció i contingut textual.

<Tabs>
<Tab title="Usage">

```jsx
import { MenuItemMultiSelectAvatar } from "twenty-ui/display";

export const MyComponent = () => {
  const imageUrl =
    "";

  return (
    <MenuItemMultiSelectAvatar
      avatar={<img src={imageUrl} alt="Avatar" />}
      text="First Option"
      selected={false}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Propietats      | Tipus       | Descripció                                                                       |
| --------------- | ----------- | -------------------------------------------------------------------------------- |
| avatar          | `ReactNode` | L'avatar o icona que es mostrarà al costat esquerre de l'element del menú        |
| text            | cadena      | El contingut de text de l'element del menú                                       |
| seleccionat     | boolean     | Indica si l'element del menú està seleccionat (marcat)        |
| enSeleccióCanvi | funció      | Funció de retorn de crida activada quan canvia l'estat de la casella de selecció |
| className       | cadena      | Nom opcional per a un estil addicional                                           |

</Tab>
</Tabs>

### Navegar

Un element del menú amb una icona opcional a l'esquerra, contingut textual i una icona de fletxa a la dreta.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemNavigate } from "twenty-ui/display";

export const MyComponent = () => {
  const handleNavigation = () => {
    console.log("Navigate to another page");
  };

  return (
    <MenuItemNavigate
      LeftIcon={IconBell}
      text="First Option"
      onClick={handleNavigation}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Propietats  | Tipus          | Descripció                                                                        |
| ----------- | -------------- | --------------------------------------------------------------------------------- |
| LeftIcon    | ComponentIcona | Una icona opcional a l'esquerra que es mostra abans del text a l'element del menú |
| text        | cadena         | El contingut de text de l'element del menú                                        |
| onClick     | funció         | Funció de retorn de crida activada quan es clica l'element del menú               |
| nomDeClasse | cadena         | Nom opcional per a un estil addicional                                            |

</Tab>
</Tabs>

### Seleccionar

Un element del menú seleccionable, amb contingut opcional a l'esquerra (icona i text) i un indicador (icona de selecció) per a l'estat seleccionat.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemSelect } from "twenty-ui/display";

export const MyComponent = () => {
  const handleSelection = () => {
    console.log("Menu item selected");
  };

  return (
    <MenuItemSelect
      LeftIcon={IconBell}
      text="First Option"
      selected={true}
      disabled={false}
      hovered={false}
      onClick={handleSelection}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Propietats  | Tipus          | Descripció                                                                        |
| ----------- | -------------- | --------------------------------------------------------------------------------- |
| LeftIcon    | ComponentIcona | Una icona opcional a l'esquerra que es mostra abans del text a l'element del menú |
| text        | cadena         | El contingut de text de l'element del menú                                        |
| seleccionat | boolean        | Indica si l'element del menú està seleccionat (marcat)         |
| desactivat  | boolean        | Indica si l'element del menú està desactivat                                      |
| sobrevolat  | boolean        | Indica si l'element del menú està sent actualment sobrevolat                      |
| onClick     | funció         | Funció de retorn de crida activada quan es clica l'element del menú               |
| nomDeClasse | cadena         | Nom opcional per a un estil addicional                                            |

</Tab>
</Tabs>

### Seleccionar Avatar

Un element del menú seleccionable amb un avatar, amb contingut opcional a l'esquerra (avatar i text) i un indicador (icona de selecció) per a l'estat seleccionat.

<Tabs>
<Tab title="Usage">

```jsx
import { MenuItemSelectAvatar } from "twenty-ui/display";

export const MyComponent = () => {
  const imageUrl =
    "";

  const handleSelection = () => {
    console.log("Menu item selected");
  };

  return (
    <MenuItemSelectAvatar
      avatar={<img src={imageUrl} alt="Avatar" />}
      text="First Option"
      selected={true}
      disabled={false}
      hovered={false}
      testId="menu-item-test"
      onClick={handleSelection}
      className
    />
  );
};

```

</Tab>
<Tab title="Props">

| Props              | Tipus       | Descripció                                                                |
| ------------------ | ----------- | ------------------------------------------------------------------------- |
| avatar             | `ReactNode` | L'avatar o icona que es mostrarà al costat esquerre de l'element del menú |
| text               | cadena      | El contingut de text de l'element del menú                                |
| seleccionat        | boolean     | Indica si l'element del menú està seleccionat (marcat) |
| desactivat         | boolean     | Indica si l'element del menú està desactivat                              |
| sobrevolat         | boolean     | Indica si l'element del menú està sent actualment sobrevolat              |
| identificadorProva | cadena      | L'atribut data-testid per a proves                                        |
| onClick            | funció      | Funció de retorn de crida activada quan es clica l'element del menú       |
| nomDeClasse        | cadena      | Nom opcional per a un estil addicional                                    |

</Tab>
</Tabs>

### Selecciona Color

Un element de menú seleccionable amb una mostra de color per a escenaris on es vulgui que els usuaris triïn un color d'un menú.

<Tabs>
<Tab title="Usage">

```jsx
import { MenuItemSelectColor } from "twenty-ui/display";

export const MyComponent = () => {
  const handleSelection = () => {
    console.log("Menu item selected");
  };

  return (
    <MenuItemSelectColor
      color="green"
      selected={true}
      disabled={false}
      hovered={true}
      variant="default"
      onClick={handleSelection}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Props       | Tipus   | Descripció                                                                                                                                                                                                           |
| ----------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| color       | cadena  | El color del tema que es mostrarà com a mostra a l'element del menú. Les opcions inclouen: `verd`, `turquesa`, `cel`, `blau`, `porpra`, `rosa`, `vermell`, `taronja`, `groc`, `gris` |
| seleccionat | boolean | Indica si l'element del menú està seleccionat (marcat)                                                                                                                                            |
| desactivat  | boolean | Indica si l'element del menú està desactivat                                                                                                                                                                         |
| sobrevolat  | boolean | Indica si l'element del menú està sent actualment sobrevolat                                                                                                                                                         |
| variant     | cadena  | La variant de la mostra de color. Pot ser "default" o "pipeline"                                                                                                                                     |
| onClick     | funció  | Funció de retorn de crida activada quan es clica l'element del menú                                                                                                                                                  |
| nomDeClasse | cadena  | Nom opcional per a un estil addicional                                                                                                                                                                               |

</Tab>
</Tabs>

### Canvia

Un element de menú amb un interruptor associat per permetre als usuaris habilitar o deshabilitar una funció específica

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from '@tabler/icons-react';

import { MenuItemToggle } from 'twenty-ui/display';

export const MyComponent = () => {

  return (
    <MenuItemToggle
      LeftIcon={IconBell}
      text="First Option"
      toggled={true}
      toggleSize="small"
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Props           | Tipus          | Descripció                                                                                       |
| --------------- | -------------- | ------------------------------------------------------------------------------------------------ |
| LeftIcon        | ComponentIcona | Una icona opcional a l'esquerra que es mostra abans del text a l'element del menú                |
| text            | cadena         | El contingut de text de l'element del menú                                                       |
| commutat        | boolean        | Indica si l'interruptor está encès ("on") o apagat ("off") |
| onToggleChange  | funció         | Funció de retorn de crida activada quan canvia l'estat de l'interruptor                          |
| midaInterruptor | cadena         | La mida de l'interruptor basculant. It can be either \                          |
| nomDeClasse     | cadena         | Nom opcional per a un estil addicional                                                           |

</Tab>
</Tabs>
